
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
	<title>Humanized Messages - Demo</title>
	<script type="text/javascript" src="prototype.js"></script>
	<script type="text/javascript" src="scriptaculous.js"></script>
	<script type="text/javascript" src="kineticmsg.js"></script>
	<link href="kineticmsg.css" media="screen" type="text/css" rel="stylesheet">

	<script>
		Event.observe(window, 'load', function() {
			$$('a.showmessage').each(function(s){
				Event.observe(s, 'click', function(){
					humanMsg.displayMsg('<strong>Success:</strong> <span class="indent">You clicked \''+s.innerHTML+'\'</span>');
					return false;
				});
			});
		});
	</script>
	
	<style>
		p.links {
			position: absolute;
			font: 2em Helvetica, Arial, Sans-Serif;
			top: 40%;
			left: 50%;
			width: 400px;
			margin-left: -200px;
			text-align: center;			
		}
		
		p.links a {
			text-decoration: none;
			color: #888;
		}
		
		p.links a:hover {
			color: #222;
		}
		
		p.links a.home {
			font-size: 10px;
			line-height: 30px;
		}
	</style>
</head>

<body>

	<p class="links">
		<a href="#" class="showmessage">Klaatu</a>
		<a href="#" class="showmessage">Barada</a>
		<a href="#" class="showmessage">Nikto</a><br />
		<a href="http://code.google.com/p/kineticmsg" class="home">Humanized Messages with Prototype</a>
	</p>

</body>
</html>